<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>Azzara Bootstrap 4 Admin Dashboard</title>
    <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport'/>
    <link rel="icon" href="../assets/img/icon.ico" type="image/x-icon"/>

    <!-- Fonts and icons -->
    <script src="../assets/js/plugin/webfont/webfont.min.js"></script>
    <script>
        WebFont.load({
            google: {"families": ["Open+Sans:300,400,600,700"]},
            custom: {
                "families": ["Flaticon", "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Brands"],
                urls: ['../assets/css/fonts.css']
            },
            active: function () {
                sessionStorage.fonts = true;
            }
        });
    </script>

    <!-- CSS Files -->
    <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/css/azzara.min.css">

    <!-- CSS Just for demo purpose, don't include it in your project -->
    <link rel="stylesheet" href="../assets/css/demo.css">
</head>
<body>
<div class="wrapper">
    <!--
            Tip 1: You can change the background color of the main header using: data-background-color="blue | purple | light-blue | green | orange | red"
    -->
    <div class="main-header" data-background-color="purple">
        <!-- Logo Header -->
        <div class="logo-header">

            <a href="index.html" class="logo">
                <img src="../assets/img/logoazzara.svg" alt="navbar brand" class="navbar-brand">
            </a>
            <button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse"
                    data-target="collapse" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon">
						<i class="fa fa-bars"></i>
					</span>
            </button>
            <button class="topbar-toggler more"><i class="fa fa-ellipsis-v"></i></button>
            <div class="navbar-minimize">
                <button class="btn btn-minimize btn-rounded">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
        <!-- End Logo Header -->

        <!-- Navbar Header -->
        <nav class="navbar navbar-header navbar-expand-lg">

            <div class="container-fluid">
                <div class="collapse" id="search-nav">
                    <form class="navbar-left navbar-form nav-search mr-md-3">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <button type="submit" class="btn btn-search pr-1">
                                    <i class="fa fa-search search-icon"></i>
                                </button>
                            </div>
                            <input type="text" placeholder="Search ..." class="form-control">
                        </div>
                    </form>
                </div>
                <ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
                    <li class="nav-item toggle-nav-search hidden-caret">
                        <a class="nav-link" data-toggle="collapse" href="#search-nav" role="button"
                           aria-expanded="false" aria-controls="search-nav">
                            <i class="fa fa-search"></i>
                        </a>
                    </li>
                    <li class="nav-item dropdown hidden-caret">
                        <a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button"
                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-envelope"></i>
                        </a>
                        <ul class="dropdown-menu messages-notif-box animated fadeIn" aria-labelledby="messageDropdown">
                            <li>
                                <div class="dropdown-title d-flex justify-content-between align-items-center">
                                    Messages
                                    <a href="#" class="small">Mark all as read</a>
                                </div>
                            </li>
                            <li>
                                <div class="message-notif-scroll scrollbar-outer">
                                    <div class="notif-center">
                                        <a href="#">
                                            <div class="notif-img">
                                                <img src="../assets/img/jm_denis.jpg" alt="Img Profile">
                                            </div>
                                            <div class="notif-content">
                                                <span class="subject">Jimmy Denis</span>
                                                <span class="block">
														How are you ?
													</span>
                                                <span class="time">5 minutes ago</span>
                                            </div>
                                        </a>
                                        <a href="#">
                                            <div class="notif-img">
                                                <img src="../assets/img/chadengle.jpg" alt="Img Profile">
                                            </div>
                                            <div class="notif-content">
                                                <span class="subject">Chad</span>
                                                <span class="block">
														Ok, Thanks !
													</span>
                                                <span class="time">12 minutes ago</span>
                                            </div>
                                        </a>
                                        <a href="#">
                                            <div class="notif-img">
                                                <img src="../assets/img/mlane.jpg" alt="Img Profile">
                                            </div>
                                            <div class="notif-content">
                                                <span class="subject">Jhon Doe</span>
                                                <span class="block">
														Ready for the meeting today...
													</span>
                                                <span class="time">12 minutes ago</span>
                                            </div>
                                        </a>
                                        <a href="#">
                                            <div class="notif-img">
                                                <img src="../assets/img/talha.jpg" alt="Img Profile">
                                            </div>
                                            <div class="notif-content">
                                                <span class="subject">Talha</span>
                                                <span class="block">
														Hi, Apa Kabar ?
													</span>
                                                <span class="time">17 minutes ago</span>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <a class="see-all" href="javascript:void(0);">See all messages<i
                                        class="fa fa-angle-right"></i> </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown hidden-caret">
                        <a class="nav-link dropdown-toggle" href="#" id="notifDropdown" role="button"
                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-bell"></i>
                            <span class="notification">4</span>
                        </a>
                        <ul class="dropdown-menu notif-box animated fadeIn" aria-labelledby="notifDropdown">
                            <li>
                                <div class="dropdown-title">You have 4 new notification</div>
                            </li>
                            <li>
                                <div class="notif-center">
                                    <a href="#">
                                        <div class="notif-icon notif-primary"><i class="fa fa-user-plus"></i></div>
                                        <div class="notif-content">
												<span class="block">
													New user registered
												</span>
                                            <span class="time">5 minutes ago</span>
                                        </div>
                                    </a>
                                    <a href="#">
                                        <div class="notif-icon notif-success"><i class="fa fa-comment"></i></div>
                                        <div class="notif-content">
												<span class="block">
													Rahmad commented on Admin
												</span>
                                            <span class="time">12 minutes ago</span>
                                        </div>
                                    </a>
                                    <a href="#">
                                        <div class="notif-img">
                                            <img src="../assets/img/profile2.jpg" alt="Img Profile">
                                        </div>
                                        <div class="notif-content">
												<span class="block">
													Reza send messages to you
												</span>
                                            <span class="time">12 minutes ago</span>
                                        </div>
                                    </a>
                                    <a href="#">
                                        <div class="notif-icon notif-danger"><i class="fa fa-heart"></i></div>
                                        <div class="notif-content">
												<span class="block">
													Farrah liked Admin
												</span>
                                            <span class="time">17 minutes ago</span>
                                        </div>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <a class="see-all" href="javascript:void(0);">See all notifications<i
                                        class="fa fa-angle-right"></i> </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown hidden-caret">
                        <a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false">
                            <div class="avatar-sm">
                                <img src="../assets/img/profile.jpg" alt="..." class="avatar-img rounded-circle">
                            </div>
                        </a>
                        <ul class="dropdown-menu dropdown-user animated fadeIn">
                            <li>
                                <div class="user-box">
                                    <div class="avatar-lg"><img src="../assets/img/profile.jpg" alt="image profile"
                                                                class="avatar-img rounded"></div>
                                    <div class="u-text">
                                        <h4>Hizrian</h4>
                                        <p class="text-muted">hello@example.com</p><a href="profile.html"
                                                                                      class="btn btn-rounded btn-danger btn-sm">View
                                        Profile</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">My Profile</a>
                                <a class="dropdown-item" href="#">My Balance</a>
                                <a class="dropdown-item" href="#">Inbox</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Account Setting</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Logout</a>
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>
        </nav>
        <!-- End Navbar -->
    </div>

    <!-- Sidebar -->
    <div class="sidebar">

        <div class="sidebar-background"></div>
        <div class="sidebar-wrapper scrollbar-inner">
            <div class="sidebar-content">
                <div class="user">
                    <div class="avatar-sm float-left mr-2">
                        <img src="../assets/img/profile.jpg" alt="..." class="avatar-img rounded-circle">
                    </div>
                    <div class="info">
                        <a data-toggle="collapse" href="#collapseExample" aria-expanded="true">
								<span>
									Hizrian
									<span class="user-level">Administrator</span>
									<span class="caret"></span>
								</span>
                        </a>
                        <div class="clearfix"></div>

                        <div class="collapse in" id="collapseExample">
                            <ul class="nav">
                                <li>
                                    <a href="#profile">
                                        <span class="link-collapse">My Profile</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#edit">
                                        <span class="link-collapse">Edit Profile</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#settings">
                                        <span class="link-collapse">Settings</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <ul class="nav">
                    <li class="nav-item">
                        <a href="index.html">
                            <i class="fas fa-home"></i>
                            <p>Dashboard</p>
                            <span class="badge badge-count">5</span>
                        </a>
                    </li>
                    <li class="nav-section">
							<span class="sidebar-mini-icon">
								<i class="fa fa-ellipsis-h"></i>
							</span>
                        <h4 class="text-section">Components</h4>
                    </li>
                    <li class="nav-item">
                        <a data-toggle="collapse" href="#base">
                            <i class="fas fa-layer-group"></i>
                            <p>Base</p>
                            <span class="caret"></span>
                        </a>
                        <div class="collapse" id="base">
                            <ul class="nav nav-collapse">
                                <li>
                                    <a href="components/avatars.html">
                                        <span class="sub-item">Avatars</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="components/buttons.html">
                                        <span class="sub-item">Buttons</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="components/gridsystem.html">
                                        <span class="sub-item">Grid System</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="components/panels.html">
                                        <span class="sub-item">Panels</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="components/notifications.html">
                                        <span class="sub-item">Notifications</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="components/sweetalert.html">
                                        <span class="sub-item">Sweet Alert</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="components/font-awesome-icons.html">
                                        <span class="sub-item">Font Awesome Icons</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="components/flaticons.html">
                                        <span class="sub-item">Flaticons</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="components/typography.html">
                                        <span class="sub-item">Typography</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a data-toggle="collapse" href="#forms">
                            <i class="fas fa-pen-square"></i>
                            <p>Forms</p>
                            <span class="caret"></span>
                        </a>
                        <div class="collapse" id="forms">
                            <ul class="nav nav-collapse">
                                <li>
                                    <a href="forms/forms.html">
                                        <span class="sub-item">Basic Form</span>
                                    </a>
                                </li>

                            </ul>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a data-toggle="collapse" href="#tables">
                            <i class="fas fa-table"></i>
                            <p>Tables</p>
                            <span class="caret"></span>
                        </a>
                        <div class="collapse" id="tables">
                            <ul class="nav nav-collapse">
                                <li>
                                    <a href="tables/tables.html">
                                        <span class="sub-item">Basic Table</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="tables/datatables.html">
                                        <span class="sub-item">Datatables</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a data-toggle="collapse" href="#maps">
                            <i class="fas fa-map-marker-alt"></i>
                            <p>Maps</p>
                            <span class="caret"></span>
                        </a>
                        <div class="collapse" id="maps">
                            <ul class="nav nav-collapse">
                                <li>
                                    <a href="maps/googlemaps.html">
                                        <span class="sub-item">Google Maps</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="maps/fullscreenmaps.html">
                                        <span class="sub-item">Full Screen Maps</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="maps/jqvmap.html">
                                        <span class="sub-item">JQVMap</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a data-toggle="collapse" href="#charts">
                            <i class="far fa-chart-bar"></i>
                            <p>Charts</p>
                            <span class="caret"></span>
                        </a>
                        <div class="collapse" id="charts">
                            <ul class="nav nav-collapse">
                                <li>
                                    <a href="charts/charts.html">
                                        <span class="sub-item">Chart Js</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="charts/sparkline.html">
                                        <span class="sub-item">Sparkline</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="nav-item">
                        <a href="widgets.html">
                            <i class="fas fa-desktop"></i>
                            <p>Widgets</p>
                            <span class="badge badge-count badge-success">4</span>
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a href="projects.html">
                            <i class="fas fa-file-signature"></i>
                            <p>Projects</p>
                            <span class="badge badge-count">5</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="boards.html">
                            <i class="fas fa-th-list"></i>
                            <p>Boards</p>
                            <span class="badge badge-count">4</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="invoice.html">
                            <i class="fas fa-file-invoice-dollar"></i>
                            <p>Invoices</p>
                            <span class="badge badge-count">6</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="pricing.html">
                            <i class="fas fa-tag"></i>
                            <p>Pricing</p>
                            <span class="badge badge-count">6</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="faqs.html">
                            <i class="far fa-question-circle"></i>
                            <p>Faqs</p>
                            <span class="badge badge-count">6</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a data-toggle="collapse" href="#custompages">
                            <i class="fas fa-paint-roller"></i>
                            <p>Custom Pages</p>
                            <span class="caret"></span>
                        </a>
                        <div class="collapse" id="custompages">
                            <ul class="nav nav-collapse">
                                <li>
                                    <a href="login.html">
                                        <span class="sub-item">Login & Register 1</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="login2.html">
                                        <span class="sub-item">Login & Register 2</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="userprofile.html">
                                        <span class="sub-item">User Profile</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="404.html">
                                        <span class="sub-item">404</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a data-toggle="collapse" href="#submenu">
                            <i class="fas fa-bars"></i>
                            <p>Menu Levels</p>
                            <span class="caret"></span>
                        </a>
                        <div class="collapse" id="submenu">
                            <ul class="nav nav-collapse">
                                <li>
                                    <a data-toggle="collapse" href="#subnav1">
                                        <span class="sub-item">Level 1</span>
                                        <span class="caret"></span>
                                    </a>
                                    <div class="collapse" id="subnav1">
                                        <ul class="nav nav-collapse subnav">
                                            <li>
                                                <a href="#">
                                                    <span class="sub-item">Level 2</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <span class="sub-item">Level 2</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li>
                                    <a data-toggle="collapse" href="#subnav2">
                                        <span class="sub-item">Level 1</span>
                                        <span class="caret"></span>
                                    </a>
                                    <div class="collapse" id="subnav2">
                                        <ul class="nav nav-collapse subnav">
                                            <li>
                                                <a href="#">
                                                    <span class="sub-item">Level 2</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="sub-item">Level 1</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- End Sidebar -->

    <div class="main-panel">
        <div class="content content-full">
            <div class="page-navs bg-white">
                <div class="nav-scroller">
                    <div class="nav nav-tabs nav-line nav-color-primary d-flex align-items-center justify-contents-center w-100">
                        <a class="nav-link active show" data-toggle="tab" href="#tab1">All Projects
                            <span class="count ml-1">(30)</span>
                        </a>
                        <a class="nav-link mr-5" data-toggle="tab" href="#tab2">Synced Projects</a>
                        <div class="ml-auto">
                            <a href="#" class="btn btn-success">New Project</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page-inner">
                <div class="row row-projects">
                    <div class="col-sm-6 col-lg-3">
                        <div class="card">
                            <div class="p-2">
                                <img class="card-img-top rounded" src="../assets/img/examples/product1.jpg"
                                     alt="Product 1">
                            </div>
                            <div class="card-body pt-2">
                                <h4 class="mb-1 fw-bold">Play Golf</h4>
                                <p class="text-muted small mb-2">Last updated: Yesterday 3:12 AM</p>
                                <div class="avatar-group">
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/jm_denis.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/chadengle.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/mlane.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/talha.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <span class="avatar-title rounded-circle border border-white bg-success">+</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <div class="card">
                            <div class="p-2">
                                <img class="card-img-top rounded" src="../assets/img/examples/product7.jpg"
                                     alt="Product 7">
                            </div>
                            <div class="card-body pt-2">
                                <h4 class="mb-1 fw-bold">Brainstorming</h4>
                                <p class="text-muted small mb-2">Last updated: Monday 1:32 AM</p>
                                <div class="avatar-group">
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/jm_denis.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/chadengle.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/mlane.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/talha.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <span class="avatar-title rounded-circle border border-white bg-success">+</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <div class="card">
                            <div class="p-2">
                                <img class="card-img-top rounded" src="../assets/img/examples/product3.jpg"
                                     alt="Product 3">
                            </div>
                            <div class="card-body pt-2">
                                <h4 class="mb-1 fw-bold">Wisata Alam</h4>
                                <p class="text-muted small mb-2">Last updated: Monday 3:30 AM</p>
                                <div class="avatar-group">
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/jm_denis.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/chadengle.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/mlane.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/talha.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <span class="avatar-title rounded-circle border border-white bg-success">+</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <div class="card">
                            <div class="p-2">
                                <img class="card-img-top rounded" src="../assets/img/examples/product4.jpg"
                                     alt="Product 4">
                            </div>
                            <div class="card-body pt-2">
                                <h4 class="mb-1 fw-bold">Analysis</h4>
                                <p class="text-muted small mb-2">Last updated: Sunday 3:12 PM</p>
                                <div class="avatar-group">
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/jm_denis.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/chadengle.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/mlane.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/talha.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <span class="avatar-title rounded-circle border border-white bg-success">+</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <div class="card">
                            <div class="p-2">
                                <img class="card-img-top rounded" src="../assets/img/examples/product5.jpg"
                                     alt="Product 5">
                            </div>
                            <div class="card-body pt-2">
                                <h4 class="mb-1 fw-bold">Meeting</h4>
                                <p class="text-muted small mb-2">Last updated: Friday 1:12 PM</p>
                                <div class="avatar-group">
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/jm_denis.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/chadengle.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/mlane.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/talha.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <span class="avatar-title rounded-circle border border-white bg-success">+</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <div class="card">
                            <div class="p-2">
                                <img class="card-img-top rounded" src="../assets/img/examples/product8.jpg"
                                     alt="Product 8">
                            </div>
                            <div class="card-body pt-2">
                                <h4 class="mb-1 fw-bold">Ngopi</h4>
                                <p class="text-muted small mb-2">Last updated: Yesterday 3:12 AM</p>
                                <div class="avatar-group">
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/jm_denis.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/chadengle.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/mlane.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/talha.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <span class="avatar-title rounded-circle border border-white bg-success">+</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <div class="card">
                            <div class="p-2">
                                <img class="card-img-top rounded" src="../assets/img/examples/product2.jpg"
                                     alt="Product 2">
                            </div>
                            <div class="card-body pt-2">
                                <h4 class="mb-1 fw-bold">Travelling</h4>
                                <p class="text-muted small mb-2">Last updated: Friday 7:45 AM</p>
                                <div class="avatar-group">
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/jm_denis.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/chadengle.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/mlane.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/talha.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="avatar avatar-sm">
                                        <span class="avatar-title rounded-circle border border-white bg-success">+</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="quick-sidebar">
        <a href="#" class="close-quick-sidebar">
            <i class="flaticon-cross"></i>
        </a>
        <div class="quick-sidebar-wrapper">
            <ul class="nav nav-tabs nav-line nav-color-primary" role="tablist">
                <li class="nav-item"><a class="nav-link active show" data-toggle="tab" href="#messages" role="tab"
                                        aria-selected="true">Messages</a></li>
                <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tasks" role="tab"
                                        aria-selected="false">Tasks</a></li>
                <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#settings" role="tab"
                                        aria-selected="false">Settings</a></li>
            </ul>
            <div class="tab-content mt-3">
                <div class="tab-chat tab-pane fade show active" id="messages" role="tabpanel">
                    <div class="messages-contact">
                        <div class="quick-wrapper">
                            <div class="quick-scroll scrollbar-outer">
                                <div class="quick-content contact-content">
                                    <span class="category-title mt-0">Contacts</span>
                                    <div class="avatar-group">
                                        <div class="avatar">
                                            <img src="../assets/img/jm_denis.jpg" alt="..."
                                                 class="avatar-img rounded-circle border border-white">
                                        </div>
                                        <div class="avatar">
                                            <img src="../assets/img/chadengle.jpg" alt="..."
                                                 class="avatar-img rounded-circle border border-white">
                                        </div>
                                        <div class="avatar">
                                            <img src="../assets/img/mlane.jpg" alt="..."
                                                 class="avatar-img rounded-circle border border-white">
                                        </div>
                                        <div class="avatar">
                                            <img src="../assets/img/talha.jpg" alt="..."
                                                 class="avatar-img rounded-circle border border-white">
                                        </div>
                                        <div class="avatar">
                                            <span class="avatar-title rounded-circle border border-white bg-success">+</span>
                                        </div>
                                    </div>
                                    <span class="category-title">Recent</span>
                                    <div class="contact-list contact-list-recent">
                                        <div class="user">
                                            <a href="#">
                                                <div class="avatar avatar-online">
                                                    <img src="../assets/img/jm_denis.jpg" alt="..."
                                                         class="avatar-img rounded-circle border border-white">
                                                </div>
                                                <div class="user-data">
                                                    <span class="name">Jimmy Denis</span>
                                                    <span class="message">How are you ?</span>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="user">
                                            <a href="#">
                                                <div class="avatar avatar-offline">
                                                    <img src="../assets/img/chadengle.jpg" alt="..."
                                                         class="avatar-img rounded-circle border border-white">
                                                </div>
                                                <div class="user-data">
                                                    <span class="name">Chad</span>
                                                    <span class="message">Ok, Thanks !</span>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="user">
                                            <a href="#">
                                                <div class="avatar avatar-offline">
                                                    <img src="../assets/img/mlane.jpg" alt="..."
                                                         class="avatar-img rounded-circle border border-white">
                                                </div>
                                                <div class="user-data">
                                                    <span class="name">John Doe</span>
                                                    <span class="message">Ready for the meeting today with...</span>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                    <span class="category-title">Other Contacts</span>
                                    <div class="contact-list">
                                        <div class="user">
                                            <a href="#">
                                                <div class="avatar avatar-online">
                                                    <img src="../assets/img/jm_denis.jpg" alt="..."
                                                         class="avatar-img rounded-circle border border-white">
                                                </div>
                                                <div class="user-data2">
                                                    <span class="name">Jimmy Denis</span>
                                                    <span class="status">Online</span>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="user">
                                            <a href="#">
                                                <div class="avatar avatar-offline">
                                                    <img src="../assets/img/chadengle.jpg" alt="..."
                                                         class="avatar-img rounded-circle border border-white">
                                                </div>
                                                <div class="user-data2">
                                                    <span class="name">Chad</span>
                                                    <span class="status">Active 2h ago</span>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="user">
                                            <a href="#">
                                                <div class="avatar avatar-away">
                                                    <img src="../assets/img/talha.jpg" alt="..."
                                                         class="avatar-img rounded-circle border border-white">
                                                </div>
                                                <div class="user-data2">
                                                    <span class="name">Talha</span>
                                                    <span class="status">Away</span>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="messages-wrapper">
                        <div class="messages-title">
                            <div class="user">
                                <div class="avatar avatar-offline float-right ml-2">
                                    <img src="../assets/img/chadengle.jpg" alt="..."
                                         class="avatar-img rounded-circle border border-white">
                                </div>
                                <span class="name">Chad</span>
                                <span class="last-active">Active 2h ago</span>
                            </div>
                            <button class="return">
                                <i class="flaticon-left-arrow-3"></i>
                            </button>
                        </div>
                        <div class="messages-body messages-scroll scrollbar-outer">
                            <div class="message-content-wrapper">
                                <div class="message message-in">
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/chadengle.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="message-body">
                                        <div class="message-content">
                                            <div class="name">Chad</div>
                                            <div class="content">Hello, Rian</div>
                                        </div>
                                        <div class="date">12.31</div>
                                    </div>
                                </div>
                            </div>
                            <div class="message-content-wrapper">
                                <div class="message message-out">
                                    <div class="message-body">
                                        <div class="message-content">
                                            <div class="content">
                                                Hello, Chad
                                            </div>
                                        </div>
                                        <div class="message-content">
                                            <div class="content">
                                                What's up?
                                            </div>
                                        </div>
                                        <div class="date">12.35</div>
                                    </div>
                                </div>
                            </div>
                            <div class="message-content-wrapper">
                                <div class="message message-in">
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/chadengle.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="message-body">
                                        <div class="message-content">
                                            <div class="name">Chad</div>
                                            <div class="content">
                                                Thanks
                                            </div>
                                        </div>
                                        <div class="message-content">
                                            <div class="content">
                                                When is the deadline of the project we are working on ?
                                            </div>
                                        </div>
                                        <div class="date">13.00</div>
                                    </div>
                                </div>
                            </div>
                            <div class="message-content-wrapper">
                                <div class="message message-out">
                                    <div class="message-body">
                                        <div class="message-content">
                                            <div class="content">
                                                The deadline is about 2 months away
                                            </div>
                                        </div>
                                        <div class="date">13.10</div>
                                    </div>
                                </div>
                            </div>
                            <div class="message-content-wrapper">
                                <div class="message message-in">
                                    <div class="avatar avatar-sm">
                                        <img src="../assets/img/chadengle.jpg" alt="..."
                                             class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="message-body">
                                        <div class="message-content">
                                            <div class="name">Chad</div>
                                            <div class="content">
                                                Ok, Thanks !
                                            </div>
                                        </div>
                                        <div class="date">13.15</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="messages-form">
                            <div class="messages-form-control">
                                <input type="text" placeholder="Type here"
                                       class="form-control input-pill input-solid message-input">
                            </div>
                            <div class="messages-form-tool">
                                <a href="#" class="attachment">
                                    <i class="flaticon-file"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="tasks" role="tabpanel">
                    <div class="quick-wrapper tasks-wrapper">
                        <div class="tasks-scroll scrollbar-outer">
                            <div class="tasks-content">
                                <span class="category-title mt-0">Today</span>
                                <ul class="tasks-list">
                                    <li>
                                        <label class="custom-checkbox custom-control checkbox-secondary">
                                            <input type="checkbox" checked="" class="custom-control-input"><span
                                                class="custom-control-label">Planning new project structure</span>
                                            <span class="task-action">
													<a href="#" class="link text-danger">
														<i class="flaticon-interface-5"></i>
													</a>
												</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="custom-checkbox custom-control checkbox-secondary">
                                            <input type="checkbox" class="custom-control-input"><span
                                                class="custom-control-label">Create the main structure							</span>
                                            <span class="task-action">
													<a href="#" class="link text-danger">
														<i class="flaticon-interface-5"></i>
													</a>
												</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="custom-checkbox custom-control checkbox-secondary">
                                            <input type="checkbox" class="custom-control-input"><span
                                                class="custom-control-label">Add new Post</span>
                                            <span class="task-action">
													<a href="#" class="link text-danger">
														<i class="flaticon-interface-5"></i>
													</a>
												</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="custom-checkbox custom-control checkbox-secondary">
                                            <input type="checkbox" class="custom-control-input"><span
                                                class="custom-control-label">Finalise the design proposal</span>
                                            <span class="task-action">
													<a href="#" class="link text-danger">
														<i class="flaticon-interface-5"></i>
													</a>
												</span>
                                        </label>
                                    </li>
                                </ul>

                                <span class="category-title">Tomorrow</span>
                                <ul class="tasks-list">
                                    <li>
                                        <label class="custom-checkbox custom-control checkbox-secondary">
                                            <input type="checkbox" class="custom-control-input"><span
                                                class="custom-control-label">Initialize the project							</span>
                                            <span class="task-action">
													<a href="#" class="link text-danger">
														<i class="flaticon-interface-5"></i>
													</a>
												</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="custom-checkbox custom-control checkbox-secondary">
                                            <input type="checkbox" class="custom-control-input"><span
                                                class="custom-control-label">Create the main structure							</span>
                                            <span class="task-action">
													<a href="#" class="link text-danger">
														<i class="flaticon-interface-5"></i>
													</a>
												</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="custom-checkbox custom-control checkbox-secondary">
                                            <input type="checkbox" class="custom-control-input"><span
                                                class="custom-control-label">Updates changes to GitHub							</span>
                                            <span class="task-action">
													<a href="#" class="link text-danger">
														<i class="flaticon-interface-5"></i>
													</a>
												</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="custom-checkbox custom-control checkbox-secondary">
                                            <input type="checkbox" class="custom-control-input"><span
                                                title="This task is too long to be displayed in a normal space!"
                                                class="custom-control-label">This task is too long to be displayed in a normal space!				</span>
                                            <span class="task-action">
													<a href="#" class="link text-danger">
														<i class="flaticon-interface-5"></i>
													</a>
												</span>
                                        </label>
                                    </li>
                                </ul>

                                <div class="mt-3">
                                    <div class="btn btn-primary btn-rounded btn-sm">
											<span class="btn-label">
												<i class="fa fa-plus"></i>
											</span>
                                        Add Task
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="settings" role="tabpanel">
                    <div class="quick-wrapper settings-wrapper">
                        <div class="quick-scroll scrollbar-outer">
                            <div class="quick-content settings-content">

                                <span class="category-title mt-0">General Settings</span>
                                <ul class="settings-list">
                                    <li>
                                        <span class="item-label">Enable Notifications</span>
                                        <div class="item-control">
                                            <input type="checkbox" checked data-toggle="toggle" data-onstyle="primary"
                                                   data-style="btn-round">
                                        </div>
                                    </li>
                                    <li>
                                        <span class="item-label">Signin with social media</span>
                                        <div class="item-control">
                                            <input type="checkbox" data-toggle="toggle" data-onstyle="primary"
                                                   data-style="btn-round">
                                        </div>
                                    </li>
                                    <li>
                                        <span class="item-label">Backup storage</span>
                                        <div class="item-control">
                                            <input type="checkbox" data-toggle="toggle" data-onstyle="primary"
                                                   data-style="btn-round">
                                        </div>
                                    </li>
                                    <li>
                                        <span class="item-label">SMS Alert</span>
                                        <div class="item-control">
                                            <input type="checkbox" checked data-toggle="toggle" data-onstyle="primary"
                                                   data-style="btn-round">
                                        </div>
                                    </li>
                                </ul>

                                <span class="category-title mt-0">Notifications</span>
                                <ul class="settings-list">
                                    <li>
                                        <span class="item-label">Email Notifications</span>
                                        <div class="item-control">
                                            <input type="checkbox" checked data-toggle="toggle" data-onstyle="primary"
                                                   data-style="btn-round">
                                        </div>
                                    </li>
                                    <li>
                                        <span class="item-label">New Comments</span>
                                        <div class="item-control">
                                            <input type="checkbox" checked data-toggle="toggle" data-onstyle="primary"
                                                   data-style="btn-round">
                                        </div>
                                    </li>
                                    <li>
                                        <span class="item-label">Chat Messages</span>
                                        <div class="item-control">
                                            <input type="checkbox" checked data-toggle="toggle" data-onstyle="primary"
                                                   data-style="btn-round">
                                        </div>
                                    </li>
                                    <li>
                                        <span class="item-label">Project Updates</span>
                                        <div class="item-control">
                                            <input type="checkbox" data-toggle="toggle" data-onstyle="primary"
                                                   data-style="btn-round">
                                        </div>
                                    </li>
                                    <li>
                                        <span class="item-label">New Tasks</span>
                                        <div class="item-control">
                                            <input type="checkbox" checked data-toggle="toggle" data-onstyle="primary"
                                                   data-style="btn-round">
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Custom template | don't include it in your project! -->
    <div class="custom-template">
        <div class="title">Settings</div>
        <div class="custom-content">
            <div class="switcher">
                <div class="switch-block">
                    <h4>Topbar</h4>
                    <div class="btnSwitch">

                        <button type="button" class="changeMainHeaderColor" data-color="blue"></button>
                        <button type="button" class="selected changeMainHeaderColor" data-color="purple"></button>
                        <button type="button" class="changeMainHeaderColor" data-color="light-blue"></button>
                        <button type="button" class="changeMainHeaderColor" data-color="green"></button>
                        <button type="button" class="changeMainHeaderColor" data-color="orange"></button>
                        <button type="button" class="changeMainHeaderColor" data-color="red"></button>
                    </div>
                </div>
                <div class="switch-block">
                    <h4>Background</h4>
                    <div class="btnSwitch">
                        <button type="button" class="changeBackgroundColor" data-color="bg2"></button>
                        <button type="button" class="changeBackgroundColor selected" data-color="bg1"></button>
                        <button type="button" class="changeBackgroundColor" data-color="bg3"></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="custom-toggle">
            <i class="flaticon-settings"></i>
        </div>
    </div>
    <!-- End Custom template -->
</div>
<!--   Core JS Files   -->
<script src="../assets/js/core/jquery.3.2.1.min.js"></script>
<script src="../assets/js/core/popper.min.js"></script>
<script src="../assets/js/core/bootstrap.min.js"></script>
<!-- jQuery UI -->
<script src="../assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="../assets/js/plugin/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>
<!-- Bootstrap Toggle -->
<script src="../assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>
<!-- jQuery Scrollbar -->
<script src="../assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<!-- Azzara JS -->
<script src="../assets/js/ready.min.js"></script>
<!-- Azzara DEMO methods, don't include it in your project! -->
<script src="../assets/js/setting-demo.js"></script>
</body>
</html>